<template>
  <div class="container-tags">
    <el-card>
      <!--筛选 -->
      <el-row>
        <!-- 表单 -->
        <el-col :span="18">
          <el-form label-width="80px" inline size="small">
            <el-form-item label="标签名称">
              <el-input v-model="reqParams.tagName"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="reqParams.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁止" value="0"></el-option> </el-select
            ></el-form-item>
            <el-form-item>
              <el-button @click="clear">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- 按钮 -->
        <el-button
          style="float: right"
          type="success"
          icon="el-icon-edit"
          size="small"
          @click="newClick()"
          >新增标签</el-button
        >
        <el-col :span="6"></el-col>
      </el-row>
      <!--总计 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        :closable="false"
        show-icon
        style="margin-bottom: 15px"
      >
      </el-alert>
      <!--表格 -->
      <el-table :data="tags">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="所属学科" prop="subjectName"></el-table-column>
        <el-table-column label="标签名称" prop="tagName"></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ scope.row.state === 1 ? "已启用" : "已禁用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-link type="primary" @click="disable(row)">
              {{row.state === 1 ? "禁用" : "启用" }}
            </el-link>
            <el-link @click="newClick(row.id)"  type="primary" :disabled='row.state === 1'
              >修改</el-link
            >
            <el-link
              @click="delGettags(row.id)"
              :disabled='row.state === 1'
              type="primary"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <!--分页 -->
      <el-pagination
        class="pager"
        background
        layout="prev, pager, next,sizes,jumper"
        :total="total"
        :page-size="reqParams.pagesize"
        :current-page="reqParams.page"
        @current-change="changePager"
        @size-change="changSize"
        :page-sizes="[5, 10, 20, 50]"
      ></el-pagination>
    </el-card>
    <tags-add :showDialog='showDialog' ref="discipline"/>
  </div>
</template>
<script>
import { list as tagsList, remove as tagsDel, changeState} from "@/api/hmmm/tags.js";
import TagsAdd from '../components/tags-add.vue'
export default {
  components: { TagsAdd },
  name: "tags-page",
  data() {
    return {
      //筛选参数
      reqParams: {
        //页码
        page: 1,
        //尺寸
        pagesize: 10,
        //标签名字，关键字
        tagName: null,
        state: null
      },
      tags: [],
      total: 0,
      showDialog: false
    };
  },
  created() {
    this.gettags();
  },
  methods: {
    // 点击删除
    delGettags(id) {
      this.$confirm("此操作将永久删除该标签, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await tagsDel({ id });
          this.$message.success("删除成功");
          this.gettags();
        })
        .catch(e => {});
    },
    // 获取标签列表
    async gettags() {
      const { data } = await tagsList(this.reqParams);
      this.tags = data.items;
      this.total = data.counts;
    },
    changePager(newPage) {
      this.reqParams.page = newPage;
      this.gettags();
    },
    changSize(newSize) {
      this.reqParams.page = 1;
      this.reqParams.pagesize = newSize;
      this.gettags();
    },
    // 搜索
    async search() {
      const {data} = await tagsList(this.reqParams)
      // console.log(res);
      this.tags = data.items
    },
    // 清除
    clear() {
      this.reqParams = {
        tagName: null,
        page: 1,
        pagesize: 10,
        state: null
      };
      this.gettags()
    },
    newClick(id) {
      this.showDialog = true
      this.$refs.discipline.getDiscipline(id)
    },
    // 禁用
    async disable(row) {
      if(row.state === 1) {
        await changeState({id: row.id, state: 0})
      }else {
        await changeState({id: row.id, state: 1})
      }
      this.$message.success("操作成功");
      this.gettags()
    }
  }
};
</script>

<style scoped lang="scss">
.container-tags {
  padding: 10px 15px;
  .pager {
    margin-top: 15px;
    margin-bottom: 15px;
    float: right;
  }
}
.el-link {
  margin-right: 10px;
}
</style>
